<template>
  <div class="login-box" ref="loginBox">
    <PageTitle>用户登录</PageTitle>
    <div class="show-msg flex-box" :class="{active:showMsg}">{{showMsg}}</div>
    <div class="icon-box flex-box">
      <img src="@/assets/img/gb-new_01.png">
    </div>
    <transition mode="out-in"
      :name="transitionName"
      :enter-active-class="'slide-active'"
      :leave-active-class="'slide-active'">
      <LoginPartA :isLoging="isLoging" :getLoginType="getLoginType" :pageAMsg ="pageAMsg" :isRemember="isRemember" :yamLoading="yamLoading" v-if="showA"></LoginPartA>
      <LoginPartB :isLoging="isLoging" :getLoginType="getLoginType" :pageBMsg ="pageBMsg" :isRemember="isRemember" :yamLoading="yamLoading" v-else></LoginPartB>
    </transition>
    <div class="login-footer">
      <div class="acount-deal flex-box">
        <div class="more-msg flex-box">
          <div class="flex-box">
            <input type="checkbox" id="checkbox_b1" v-model="isRemember" class="chk_2" :checked="isRemember" />
            <label for="checkbox_b1"></label>
            <p class="acount-desc">记住账号</p>
          </div>
          <div class="flex-box">
            <p @click="toRegister" class="register">注册账号</p>
            <p @click="toReset">忘记密码</p>
          </div>
        </div>
      </div>
      <div class="log-method flex-box">
        <h5>登录方式</h5>
        <div class="select-list flex-box" @click="logMethod('A')">
          <div class="icon-box flex-box" :class="{'active-a':showA}">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gb-shouji1"></use>
            </svg>
          </div>
          <p>手机号登录</p>
        </div>
        <div class="select-list flex-box" @click="logMethod('B')">
          <div class="icon-box flex-box" :class="{'active-b':!showA}">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gb-youjian1"></use>
            </svg>
          </div>
          <p>邮箱/ID登录</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import qs from 'qs'
import { mapActions } from 'vuex'
import LoginPartA from '@/components/Login/LoginPartA.vue'
import LoginPartB from '@/components/Login/LoginPartB.vue'

export default {
  name: 'home',
  data() {
    return {
      showA: true,
      iconBody: '#icon-gb-youjian1',
      iconBg: '#a2c051',
      showMsg: '',
      pageAMsg: '',
      pageBMsg: '',
      fromPathName: null,
      isRemember: true,
      iconName: '账号邮箱登录',
      noBackPage: ['login', 'register', 'success'],
      isLoging: false,
      acountStorage: '',
      transitionName: 'slide-right',
      yamLoading: 'https://login.genebook.com.cn/common/images/loading2.gif'
    }
  },
  components: {
    LoginPartA,
    LoginPartB
  },
  computed: {},
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.fromPathName = from.name
    })
  },
  methods: {
    ...mapActions({
      setUserState: 'global/set_user_state'
    }),
    logMethod(page) {
      this.showA = page === 'A' ? true : false
      this.transitionName = this.showA ? 'slide-right' : 'slide-left'
    },
    toRegister() {
      this.$router.push('/register')
    },
    toReset() {
      this.$router.push('/resetacount')
    },
    getLoginType(loginname) {
      var testMail = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/
      if (testMail.test(loginname)) {
        var mail_last = loginname.substring(loginname.lastIndexOf('@') + 1)
        mail_last = mail_last.toLowerCase()
        if (
          mail_last == 'genomics.org.cn' ||
          mail_last == 'bgiamericas.com' ||
          mail_last == 'genomics.cn' ||
          mail_last == 'bgitechsolutions.com' ||
          mail_last == 'bgihealthamericas.com' ||
          mail_last == 'bgi.com'
        ) {
          return 100
        }
        return -1
      } else {
        return -1
      }
    },
    resetYzm() {
      this.yamLoading = 'https://login.genebook.com.cn/common/images/loading2.gif'
      this.$API.randomYzm().then(data => {
        this.yamLoading = data
      })
      // this.$axios.post('/logintest/login/jsp/code.jsp?id=' + Math.random()).then(data => {
      //   this.yamLoading = data
      //   console.log(data)
      // })
    }
  },
  created() {
    this.resetYzm()
    console.log(this.$route)
    this.acountStorage = JSON.parse(localStorage.getItem('loginAcountMsg'))
    if (this.acountStorage) {
      if (this.acountStorage.page === 1) {
        this.showA = true
        this.pageAMsg = this.acountStorage
        this.pageBMsg = ''
      } else {
        this.showA = false
        this.pageBMsg = this.acountStorage
        this.pageAMsg = ''
      }
    }
    this.$bus.$on('resetLogYam', () => {
      this.resetYzm()
    })
    this.$bus.$on('commitLogin', (data, storage) => {
      // console.log(data, storage)
      this.isLoging = true
      this.$API
        .loginSubmit(qs.stringify(data))
        .then(res => {
          console.log(res)
          this.resetYzm()
          this.isLoging = false
          switch (res.loginflag) {
            case '0':
              console.log(this.fromPathName)
              this.setUserState(true) // 更新全局登录状态
              if (data.remember === 1) {
                localStorage.setItem('loginAcountMsg', JSON.stringify(storage))
              }
              if (this.$route.query.redirect) {
                this.$router.replace(this.$route.query.redirect)
              } else if (this.fromPathName && !this.noBackPage.includes(this.fromPathName)) {
                this.$router.go(-1)
              } else {
                this.$router.replace('/')
              }
              break
            case '1':
              this.$msg('登录失败，账号或者密码错误')
              break
            case '2':
              this.$msg('登录失败，账号不存在')
              break
            case '3':
              this.$msg('登录失败, 密码错误')
              break
            case '4':
              this.$msg('登录失败, 您的账户未激活')
              break
            case '5':
              this.$msg('登录失败, 您的账户已被管理员禁用')
              break
            case '6':
              this.$msg('登录失败, 您的身份证、邮箱或手机号已存在')
              break
            case '7':
              this.$msg('登录失败，您的账户已被锁定，系统将于24小时以后解锁，或者联系客服人员')
              break
            case '8':
              this.$msg('密码错误，您还可以尝试4次')
              break
            case '9':
              this.$msg('密码错误，您还可以尝试3次')
              break
            case '10':
              this.$msg('密码错误，您还可以尝试2次')
              break
            case '11':
              this.$msg('密码错误，您还可以尝试1次')
              break
            case '12':
              this.$msg('密码错误，您的账户已被锁定，系统将于24小时以后解锁，或者联系客服人员')
              break
            case '13':
              this.$msg('无法识别账号类型')
              break
            case '50':
              this.$msg('登录失败, 您输入的验证码错误或者已经失效')
              break
            default:
              this.$msg('登录失败')
              break
          }
        })
        .catch(() => {
          this.$msg('请求超时')
          this.isLoging = false
          this.resetYzm()
        })
    })
    this.$bus.$on('setShowMsg', data => {
      this.showMsg = data
      setTimeout(() => {
        this.showMsg = ''
      }, 2500)
    })
  },
  mounted() {}
}
</script>
<style lang="scss">
.login-box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #f3f8fb;
  .show-msg {
    width: 100%;
    height: 0;
    background: -webkit-linear-gradient(left bottom, #46c3f8, #8adcff, #46c3f8);
    font-size: 14px;
    color: #fff;
    overflow: hidden;
    transition: height 0.25s ease;
    -webkit-transition: height 0.25s ease;
    &.active {
      height: 28px;
    }
  }
  .log-box-main {
    width: 100%;
    height: 600px;
    overflow: hidden;
  }
  h1 {
    font-size: 18px;
    color: #333;
    line-height: 56px;
    text-align: center;
    font-weight: bold;
    margin-top: 24px;
  }
  h2 {
    font-size: 18px;
    color: #333;
    line-height: 20px;
    margin-bottom: 8px;
    text-align: left;
    font-weight: bold;
    margin-left: 20px;
  }
  .icon-box {
    width: 100%;
    height: 100px;
    img {
      width: 115px;
    }
  }
  .login-lists {
    width: 100%;
    padding: 0 20px;
    overflow: hidden;
    box-sizing: border-box;
    li {
      width: 100%;
      height: 58px;
      line-height: 58px;
      border-top: 1px solid #dddddd;
      font-size: 16px;
      color: #717883;
      position: relative;
      box-sizing: border-box;
      float: left;
      &:first-child {
        border-top: none;
      }
      &:last-child {
        border-bottom: 1px solid #dddddd;
      }
      .input-acount {
        width: 90%;
        float: left;
      }
      .input-password {
        width: 70%;
        padding: 0;
        float: left;
      }
      &.error-tips {
        width: 100%;
        height: auto;
        border: none;
        padding: 4px 0;
        line-height: 14px;
        text-align: left;
        color: #1c93d0;
        float: left;
        margin-top: -16px;
        position: relative;
        top: -4px;
        p {
          font-size: 14px;
          padding-top: 5px;
        }
      }
      .clear-btn {
        width: 20px;
        height: 58px;
        position: absolute;
        right: 0;
        top: 3px;
        font-size: 12px;
      }
      .password-deal {
        width: 60px;
        height: 20px;
        position: absolute;
        right: 0;
        top: 15px;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        color: #333;
        .password-line {
          width: 1px;
          height: 20px;
          background: #bfbfbf;
        }
        .icon-pass01 {
          font-size: 22px;
        }
        .icon-pass02 {
          font-size: 16px;
        }
      }
      input {
        width: 100%;
        height: 58px;
        padding: 0;
        line-height: 58px;
        font-size: 16px;
        border: none;
        outline: none;
        background: none;
        color: #333;
        &::-webkit-input-placeholder {
          color: #717883;
        }
      }
      &.yan-zheng {
        padding-right: 100px;
        button {
          color: #1c93d0;
          height: 58px;
          width: 100px;
          right: 0;
          top: 0;
          background: none;
          position: absolute;
          border: none;
          padding: 0;
          font-size: 16px;
          text-align: right;
          &:disabled {
            color: #999 !important;
          }
        }
        .yzm-box {
          position: absolute;
          width: 58px;
          height: 20px;
          top: 18px;
          right: 0;
          img {
            float: left;
            max-width: 100%;
            top: 0;
          }
        }
      }
    }
  }
  .commit-btn {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    button {
      width: 100%;
      height: 42px;
      font-size: 16px;
      color: #fff;
      background: #1c93d0;
      font-weight: bold;
      border: none;
      margin-top: 20px;
      border-radius: 5px;
      img {
        width: 36px;
      }
      &:disabled {
        opacity: 0.5 !important;
      }
    }
  }
  .more-msg {
    width: 100%;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    input {
      margin: 0;
    }
    .register {
      margin-right: 12px;
    }
    p {
      font-size: 14px;
      color: #1b93d0;
      line-height: 20px;
      margin-top: 15px;
    }
    .acount-desc {
      margin-left: 4px;
      margin-right: 12px;
      color: #999;
    }
  }
  .login-footer {
    height: 100px;
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 0;
    border-top: 1px solid #dddddd;
    .acount-deal {
      width: 100%;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      position: absolute;
      left: 0;
      top: -58px;
    }
    .log-method {
      height: 100%;
    }
    h5 {
      position: absolute;
      width: 100px;
      font-size: 12px;
      height: 14px;
      line-height: 14px;
      background: #f3f8fb;
      position: absolute;
      left: 50%;
      color: #717883;
      margin-left: -50px;
      top: -7px;
    }
    .select-list {
      flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      width: 80px;
      .icon-box {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        font-size: 32px;
        color: #fff;
        background: #ccc;
        &.active-a {
          background: #00acd2;
        }
        &.active-b {
          background: #a2c051;
        }
      }
      p {
        font-size: 12px;
        color: #717883;
        line-height: 16px;
        margin-top: 4px;
        width: 100%;
      }
    }
  }
}
.chk_2 + label {
  width: 20px;
  height: 7px;
  background: #ddd;
  padding: 5px;
  border-radius: 10px;
  display: inline-block;
  position: relative;
  top: 7px;
}
.chk_2 + label:before {
  content: ' ';
  width: 15px;
  height: 15px;
  background: #fff;
  position: absolute;
  top: 1px;
  left: 1px;
  z-index: 999;
  border-radius: 100px;
  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0px 1px rgba(0, 0, 0, 0.3);
  transition: all 0.1s ease-in;
  -webkit-transition: all 0.1s ease-in;
}
.chk_2 + label:after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0, 0, 0, 0.4);
  transition: all 0.1s ease-in;
  -webkit-transition: all 0.1s ease-in;
}
.chk_2:checked + label:before {
  left: 14px;
}
.chk_2:checked + label:after {
  background: #009de1;
  box-shadow: 0 0 1px #009de1;
}
.slide-active {
  transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition-property: opacity, transform;
}
.slide-left-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(30%, 0, 0);
}
.slide-left-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-30%, 0, 0);
}
</style>
<style lang="scss" scoped>
</style>
